<template>
  <view class="search-page">
    <view class="header">
      <inputItem showText="搜索热门壁纸" iconType="search" :selectList="articleList" :tagWords="tagWords" @spread="handleSpread"></inputItem>

      <image @click="switchTab(showType)" style="width: 6.4vw; height: 6.4vw; margin-top: 2.5vw" :src="`../../static/icons/${showType}.svg`"></image>
    </view>
    <view class="main">
      <view v-if="searchShow" class="recently-search">
        <view class="tips">最近搜索</view>
        <view class="body" @click="recentlySelected">
          <view v-for="(item, index) in recentlySearch" :key="index" :id="index" class="search-item">
            {{ item }}
          </view>
        </view>
      </view>

      <view class="hot-search">
        <view class="tips">热门搜索</view>
        <view class="body" @click="hotSelected">
          <view v-for="(item, index) in hotSearch" :key="index" :id="index" class="search-item">
            {{ item }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import inputItem from './components/inputItem.vue';
import { ref, reactive, computed } from 'vue';
import { usearticleListStore } from '@/stores/articeList';
import { storeToRefs } from 'pinia';
//获取作品信息数组，并通过Map方法操作对数组元素进行对应操作，并传给子组件下拉框显示
const store = usearticleListStore();
const { imgList } = storeToRefs(store);
const { roundRobinSplit, parseFilename } = store;
const articleList = reactive(
  imgList.value.map(parseFilename).map((item) => {
    return item.title + ' ' + item.author;
  })
);

//搜索表单内容
const searchContent = ref('');
console.log(searchContent.value);
//控制图片显示类型
let showType = ref('phone');
function switchTab(e) {
  showType.value = showType.value == 'phone' ? 'computer' : 'phone';
}
//实现最近搜索功能，Set去除重复元素
let recentlySearch = reactive([]);
function searchUpdate(item) {
  recentlySearch.unshift(item);
  recentlySearch.splice(0, recentlySearch.length, ...new Set(recentlySearch));
  if (recentlySearch.length > 3) {
    recentlySearch.pop();
  }
}

//控制最近搜索的隐藏显示
const searchShow = computed(() => {
  return recentlySearch.length > 0 ? true : false;
});
//热门搜索功能模块，测试中
const hotSearch = reactive(['古风壁画', '情侣壁纸', '萌宠爱家']);

//最近搜索标签点击选中，并传值给子组件
const tagWords = ref('');
function recentlySelected(e) {
  tagWords.value = recentlySearch[e.target.id];
}

function hotSelected(e) {
  tagWords.value = hotSearch[e.target.id];
}

function handleSpread(content) {
  searchUpdate(content);
}
</script>

<style lang="scss" scoped>
.search-page {
  width: 100%;
  height: 100%;
  .header {
    width: 89.6vw;
    height: 10.8vw;
    display: flex;
    flex-direction: row;
    padding: 11.6vw 5.2vw 5.2vw;
    background-color: white;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 2;
  }
  .main {
    padding: 2.8vw 5.2vw 0 5.2vw;
    width: 89.6vw;
    height: auto;
    .recently-search,
    .hot-search {
      text-align: left;
      .tips {
        font-size: 3.6vw;
        line-height: 5.2vw;
        color: rgb(200, 200, 200);
      }
      .body {
        height: 10.8vw;
        width: 78.8vw;
        margin: 5vw 0;
        display: flex;
        flex-direction: row;
        .search-item {
          margin-left: 0;
          margin-right: 2.8vw;
          // padding: auto 3vw;
          width: 24.4vw;
          height: 10.8vw;
          font-size: 3.6vw;
          border-radius: 5.4vw;
          line-height: 10.8vw;
          font-weight: bold;
          text-align: center;
          border: 0.6vw solid #000;
          white-space: nowrap; /* 禁止换行 */
          overflow: hidden; /* 隐藏溢出 */
          text-overflow: ellipsis; /* 显示省略号 */
          &:hover {
            background-color: #eee;
          }
        }
      }
    }
  }
}
</style>
